<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="list">
      <view class="item" v-for="(item,index) in list" :key="index">
        <view class="avatar">
          <image :src="setUrl(item.avatar)" class="img" mode="aspectFill" v-if="item.avatar"></image>
          <image src="../../../static/logo.png" class="img" mode="aspectFill" v-else></image>
        </view>
        <view class="right">
          <view class="title">{{ item.nickname }} 申请加入【{{ item.association_name }}】</view>
          <view class="desc">{{ item.content }}</view>
          <view class="time">{{ item.createtime }}</view>
          <template v-if="item.examine_status == 2">
            <view class="desc pt">{{ item.reason }}</view>
            <view class="time">{{ item.examine_time }}</view>
          </template>
          <button class="btn" v-if="item.examine_status == 0" @click="tapClick(item)">审批</button>
          <button class="btn" disabled v-if="item.examine_status == 1">通过</button>
          <button class="btn" disabled v-if="item.examine_status == 2">不通过</button>
        </view>
      </view>
      <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    </view>
    <uv-popup ref="popup" bgColor='#FFF' round='24rpx' :customStyle="{width: '75%'}">
      <view class="bomb">
        <view class="close" @click="close">
          <uv-icon size="40rpx" name="close" color='#999999'></uv-icon>
        </view>
        <view class="title" v-if="status">
          <view class="test">是否同意【{{ rows.nickname }}】</view>
          <view class="test">加入社群</view>
        </view>
        <template v-else>
          <view class="desc">拒绝理由</view>
          <view class="textarea">
            <uv-textarea v-model="reason" placeholder="请输入" maxlength='255' border='none' placeholderStyle='font-size: 28rpx' :textStyle="{fontSize: '28rpx'}" :customStyle="{backgroundColor: '#F5F5F5',borderRadius: '16rpx'}"></uv-textarea>
          </view>
        </template>
        <template v-if="status">
          <view class="foot">
            <button class="btn cancel" @click="operate(false)">拒绝</button>
            <button class="btn confirm" @click="operate(true)">同意</button>
          </view>
        </template>
        <template v-else>
          <view class="foot">
            <button class="btn cancel" @click="carry(false)">取消</button>
            <button class="btn confirm" @click="carry(true)">提交</button>
          </view>
        </template>
      </view>
    </uv-popup>
    
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { post } from '@/api';
import { loading, toast, setUrl } from '@/common';

const popup = ref(null);

let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);
let rows = ref({});
let status = ref(true);
let reason = ref('');

onLoad(() => {
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})

function carry(value){
  if(!value){
    popup.value.close();
    setTimeout(() => {
      status.value = true;
      reason.value = '';
    }, 1000)
  }else{
    if(!reason.value) return toast('请输入拒绝的原因');
    setExamine(2)
  }
}
function close(){
  status.value = true;
  popup.value.close();
}
function operate(value){
  // toast('无数据无法测试，等有数据再做');
  // popup.value.close();
  if(!value){
    status.value = false;
    reason.value = '';
  }else{
    reason.value = '';
    setExamine(1)
  }
}
function setExamine(value){
  const params = {
    apply_id: rows.value.id,
    examine_status: value,
    reason: value == 1 ? '同意' : reason.value
  }
  post('api/association/examineAssociationMember', params).then(res => {
    popup.value.close();
    if(res.code == 1){
      toast('操作成功');
      page = 1
      list.value = [];
      getList();
    }
  })
}
function getList(){
  const params = {
    page,
    limit,
    type: 2
  }
  post('api/message/getMessageList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      data.data.forEach(e => {
        e.createtime = uni.$uv.timeFormat(e.createtime, 'yyyy-mm-dd hh:MM:ss');
        e.examine_time = uni.$uv.timeFormat(e.examine_time, 'yyyy-mm-dd hh:MM:ss')
      })
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function tapClick(row){
  rows.value = uni.$uv.deepClone(row);
  popup.value.open();
}
</script>

<style lang="scss" scoped>
  .bomb{
    position: relative;
    width: 100%;
    .close{
      position: absolute;
      right: 35rpx;
      top: 35rpx;
      z-index: 2;
    }
    .foot{
      width: 100%;
      padding: 0 34rpx;
      padding-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn{
        width: 48%;
        text-align: center;
        &.confirm{
          
        }
        &.cancel{
          background-image: none;
          background-color: #FFFFFF;
          color: #737373;
          border: 1px solid #737373;
        }
      }
    }
    .desc{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      text-align: center;
      padding-top: 40rpx;
    }
    .textarea{
      padding: 40rpx;
    }
    .title{
      text-align: center;
      padding: 100rpx 0;
      .test{
        font-weight: 500;
        font-size: 36rpx;
        color: #2B2B2B;
        text-align: center;
      }
    }
  }
  .list{
    padding: 0 30rpx;
    .item{
      padding-top: 50rpx;
      padding-bottom: 60rpx;
      border-bottom: 1px solid rgba($color: #979797, $alpha: .3);
      display: flex;
      align-items: flex-start;
      &:last-child{
        border-bottom: 0;
      }
      .right{
        position: relative;
        padding-left: 26rpx;
        flex: 1;
        width: 0;
        .btn{
          width: 164rpx;
          height: 52rpx;
          line-height: 52rpx;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .time{
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
          padding-top: 26rpx;
        }
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
          padding-top: 14rpx;
          &.pt{
            padding-top: 26rpx;
          }
        }
        .title{
          font-weight: 400;
          font-size: 26rpx;
          color: #E43222;
          padding-top: 10rpx;
        }
      }
      .avatar{
        width: 79rpx;
        height: 79rpx;
        .img{
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F0F0F0;
  }
</style>